<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>登录页</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ./css/sm.min.css">
		<link rel="stylesheet" href=" ./css/sm-extend.min.css">
		<link rel="stylesheet" href=" ./css/iconfont.css">
		<script src='js/vue.js'></script>
		<script src='js/axios.min.js'></script>
		
		<style type="text/css">
			.page{
				
			}
			.page img{
				position: absolute;
				height: 100%;
				width: 100%;
			}
			#main{
				/* border: #000000 solid 1px; */
				width: 14rem;
				height: 9rem;
				margin: auto;
				margin-top: 11rem;
				position: relative;
			}
			.my-row{
				/* border: #000000 solid 1px; */
				height: 2rem;
				width: 100%;
				margin-bottom: 0.8rem;
			}
			.my-row>div{
				float: left;
				height: 100%;
				line-height: 1.5rem;
				
			}
			.my-row input{
				height: 100%;
				width: 100%;
				padding-left: 0.3rem;
			}
			.my-row button{
				height: 100%;
				width: 100%;
				background-color:  rgba(0,0,0,.5);
				border: 0;
				color: white;
			}
			.c1{
				padding: 0.2rem;
				width: 15%;
				background-color: rgb(0,169,136);
				color: white;
				text-align: center;
			}
			.c2{
				width: 85%;
			}
			#addUser{
				position: absolute;
				color: #EEEEEE;
				right: 0rem;
				bottom: 0.01rem;
				
			}
			/* 图片切换 */
			#alterImg1{
				position: absolute;
				opacity: 0;
				width: 100%;
				height: 100%;
			}
			#alterImg img{
				height: 4rem;
				width: 6rem;
			}
		</style>
	</head>
	<body>
				
		 <div id="page">
		<!-- page 容器 -->
		<div class="page" id="background">
			 <img src="./img/loginImg.gif" >
			
			<!-- 这里是页面内容区 -->
			<div class="content">
				
				<div id="main">
					
					<div class="my-row">
						
						<div >
							<span style="color: #EEEEEE; font-weight: bold; font-size: x-large;">悦生活</span>
						</div>
						
					</div>
					
					<div class="my-row">
						
						<div class="c1">
							<span style="font-size: 1rem;" class="icon iconfont icon-icontouxiang"></span>
						</div>
						<div class="c2 item-input">
							<input maxlength="11" id="phont" type="number" placeholder="手机号" />
						</div>
					</div>
					
					<div class="my-row">
						<div class="c1">
							<span style="font-size: 1rem;" class="icon iconfont icon-suo"></span>
						</div>
						<div class="c2">
							<input maxlength="18" id="pass" type="password" placeholder="密码" />
						</div>
					</div>
					
					<div class="my-row" style="margin-top: 2rem;">
						<button onclick="submit()" type="button">登录</button>
					</div>
					
					<div id="addUser" class="open-popup" data-popup=".popup-userMes">
						注册？
					</div>
					
				</div>
			</div>
		</div>
		<!-- Popup -->
		<!-- 修改个人资料 -->
		<div class="popup popup-userMes">
			<div class="content-block" style="margin-top: 0.5rem;">
				<!-- 工具栏 -->
				<div class="inform-top row">
					<div class="t1 col-40">
						<span class="close-popup iconfont icon-fanhui"></span>
					</div>
					<div class="t2 col-33">
						<span id="informName">用户注册</span>
					</div>
				</div>
				<!-- 输入区域 -->
				<div id="report-count" class="item-content list-block" style="margin: 1rem 0;">
					
					<ul>
						  <form id="userMesForm">
							  <li>
							    <div class="item-content">
							      <div class="item-media"><i class="icon icon-form-name"></i></div>
							      <div class="item-inner">
							        <div class="item-title label">手机</div>
							        <div class="item-input">
							          <input maxlength="11" id="phone" name="phone"  type="number" placeholder="phone">
							        </div>
							      </div>
							    </div>
							  </li>
							  <li>
							    <div class="item-content">
							      <div class="item-media"><i class="icon icon-form-name"></i></div>
							      <div class="item-inner">
							        <div class="item-title label">姓名</div>
							        <div class="item-input">
							          <input maxlength="50" id="name" name="name"  type="text" placeholder="name">
							        </div>
							      </div>
							    </div>
							  </li>
					      <li>
					        <div class="item-content">
					          <div class="item-media"><i class="icon icon-form-name"></i></div>
					          <div class="item-inner">
					            <div class="item-title label">昵称</div>
					            <div class="item-input">
					              <input maxlength="8" id="nickname" name="nickname"  type="text" placeholder="nickname">
					            </div>
					          </div>
					        </div>
					      </li>
						  <li>
						    <div class="item-content">
						      <div class="item-media"><i class="icon icon-form-name"></i></div>
						      <div class="item-inner">
						        <div class="item-title label">密码</div>
						        <div class="item-input">
						          <input maxlength="16" id="password" name="password"  type="password" placeholder="password">
						        </div>
						      </div>
						    </div>
						  </li>
					      <li>
					        <div class="item-content">
					          <div class="item-media"><i class="icon icon-form-email"></i></div>
					          <div class="item-inner">
					            <div class="item-title label">邮箱</div>
					            <div class="item-input">
					              <input maxlength="50" id="email" name="email"  type="email" placeholder="E-mail">
					            </div>
					          </div>
					        </div>
					      </li>
						  <li>
						  <div class="item-content">
							<div class="item-media"><i class="icon icon-form-gender"></i></div>
							<div class="item-inner">
							  <div class="item-title label">社区</div>
							  <div class="item-input">
								<select name="forumId" v-if="forums!=null">
								  <option v-for="item in forums" :value="item.id">{{item.name}}</option>
								</select>
							  </div>
							</div>
						  </div>
						</li>
						  <li>
						  <div class="item-content">
							<div class="item-media"><i class="icon icon-form-gender"></i></div>
							<div class="item-inner">
							  <div class="item-title label">证件类型</div>
							  <div class="item-input">
								<select name="centerUsertype">
								  <option value="1">个人用户-身份证</option>
								  <option value="2">商家-营业执照</option>
								  <option value="3">物业执照</option>
								</select>
							  </div>
							</div>
						  </div>
						</li>
						<li>
						  <div class="item-content">
						    <div class="item-media"><i class="icon icon-form-name"></i></div>
						    <div class="item-inner">
						      <div class="item-title label">证件号</div>
						      <div class="item-input">
						        <input maxlength="18" id="centerCredentialcode" name="centerCredentialcode"  type="text" placeholder="ID Number">
						      </div>
						    </div>
						  </div>
						</li>
					      <!-- <li class="align-top">
					        <div class="item-content">
					          <div class="item-media"><i class="icon icon-form-comment"></i></div>
					          <div class="item-inner">
					            <div class="item-title label">证件资料</div>
					            <div class="item-input">
					              <textarea maxlength="255" name="centerVerifydata" style="font-size: 0.7rem;"></textarea>
								  
					            </div>
					          </div>
					        </div>
					      </li> -->
						</form>
						<li>
							<div class="item-content">
							  <div class="item-media"><i class="icon icon-form-name"></i></div>
							  <div class="item-inner">
								<div class="item-title label">证件照</div>
								<div class="item-input" id="alterImg">
									<form id="imgForm" method="post" enctype="multipart/form-data">
										<input id="alterImg1" name="img" type="file" @change="addImgMethod" accept="image/jpeg" />
									  </form>
									<img :src="photo">
								</div>
							  </div>
							</div>
						  </li>
					    </ul>
				</div>
				 <p><a @click="addUserSubmit()" class="button button-big button-round">注册</a></p>
				 
			</div>
			
		</div>
		
		</div>
		
		
		
		<script src='./js/jquery-3.2.1.min.js'></script>
		<script src='./js/sm.js'></script>
		<script src='./js/sm-extend.js'></script>
		<script src="./js/config.js"></script>
		<script type="text/javascript">
			function submit(){
				var uname=$("#phont").val();
				var pwd=$("#pass").val();
				if(uname.length!=11){
					$.toast("手机号应为11位");
					return;
				}else if(pwd.length<8||pwd.length>18){
					$.toast("密码8-18位");
					return;
				}
				$.get(
					serviceIP+"/auth/login", {
						uname: uname,
						pwd: pwd
					},
					function(data) {
						if(data.state==1){
							
							//保存本地
							var storage=window.localStorage;
							storage.clear();
							storage.setItem("token",data.token);
							storage.setItem("refreshtoken",data.refreshtoken);
							location.href="main-index.html";
						}else{
							$.toast(data.message);
						}
					});
			}
			
			/* 注册表单验证 */
			function checkUserMes(){
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if($("#phone").val().length !=11){
					$.toast("手机号应为11位！");
					return false;
				}else if($("#name").val().trim().length ==0){
					$.toast("请输入姓名！");
					return false;
				}else if($("#nickname").val().trim().length ==0){
					$.toast("请输入昵称！");
					return false;
				}else if($("#password").val().length >16||$("#password").val().length <8){
					$.toast("密码长度 8-16位！");
					return false;
				}else if(!reg.test($("#email").val())){
					$.toast("请输入正确的邮箱！");
					return false;
				}if($("#centerCredentialcode").val().length !=18){
					$.toast("证件号应为18位！");
					return false;
				}
				return true;
			}
		</script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#page",
				data: {
					forums: null,
					photo:"img/iconfont-tianjia.png",
					img:""
				},
				created() {
					//加载社区信息
					axios.get(serviceIP+"/forum/allForum").then(result => {
						this.forums=result.data.data;
					});
				},
				methods: {
					addUserSubmit: function(){
						/* 注册提交 */
						if(checkUserMes()){
							if(this.photo!="img/iconfont-tianjia.png"){
								/* 提交 */
								var data=$("#userMesForm").serialize()+"&centerVerifydata="+this.img;
								axios.get(serviceIP+"/auth/addUser?"+data).then(result => {
									//console.log(result.data);
									if(result.data.status==1){
										$.toast("注册成功");
										//关闭弹窗
										$.closeModal(".popup-userMes");
									}else{
										$.toast(result.data.mes);
									}
								});
								/* console.log(data); */
							}else{
								$.toast("请添加证件照！");
							}
						}
					},
					/* 照片 */
					imgSrc: function(src) {
						return src;
					},
					/* 添加照片 */
					addImgMethod: function() {
						var that = this;
						$.ajax({
							url: serviceIP+"/forum/addImg",
							type: "post",
							dataType: "json",
							cache: false,
							data: new FormData($("#imgForm")[0]),
							headers: {
										"token":token,
										"refreshtoken":refreshtoken
									},
							processData: false, // 不处理数据
							contentType: false, // 不设置内容类型
							success: function(data) {
								that.photo=that.imgSrc(data.url);
								that.img=data.url;
							}
						});
					}
				}
			});
		</script>
		<script>
			$.init();
		</script>
	</body>

</html>
